<template>
    <view class="recommend bg-color">
        <view class="recommend-items">
            <image class="longBook" src="../../static/img/recommend/long2.jpeg"></image>
            <view class="smallBook">
                <image class="small-img" src="../../static/img/recommend/bookss1.jpg"></image>
                <image class="small-img" src="../../static/img/recommend/bookss2.jpg"></image>
                <image class="small-img" src="../../static/img/recommend/bookss3.jpg"></image>
            </view>
        </view>
        <view class="recommend-items">
            <image class="longBook" src="../../static/img/recommend/long1.jpg"></image>
            <view class="smallBook">
                <image class="small-img" src="../../static/img/recommend/books1.jpg"></image>
                <image class="small-img" src="../../static/img/recommend/books2.jpg"></image>
                <image class="small-img" src="../../static/img/recommend/books3.jpg"></image>
            </view>
        </view>
        <view class="recommend-items">
            <image class="longBook" src="../../static/img/recommend/long3.jpg"></image>
            <view class="smallBook">
                <image class="small-img" src="../../static/img/recommend/booksss1.jpg"></image>
                <image class="small-img" src="../../static/img/recommend/booksss2.jpg"></image>
                <image class="small-img" src="../../static/img/recommend/booksss3.jpg"></image>
            </view>
        </view>
    </view>
</template>

<script>
</script>

<style scoped>
    .recommend {
        padding: 20 rpx;
        background-color: #42B7FB;
        border-radius: 40 rpx;
    }

    .recommend-items {
        display: flex;
        flex-direction: column;
        border-radius: 20 rpx;
        border: 2 rpx solid #CCCCCC;
        overflow: hidden;
        margin: 20 rpx 0;
    }

    .longBook {
        width: 100%;
        height: 300 rpx;
    }

    .smallBook {
        width: 100%;
        height: 240 rpx;
    }

    .small-img {
        width: 33.3%;
        height: 100%;
    }
</style>
